<style lang="scss" scoped>
@import "~@/scss/global/colors.scss";

.popCont {
    position: absolute;
    width: 100%;
    top: 0;
    height: 100vh;

    /*background:rgba(#000, .2);*/
    .ui-main {
        box-shadow: 0 0 20px rgba(#000, 0.3);
        overflow: hidden;
        border-radius: 5px;
    }

    /*padding:10%;*/
}

.compCont {
    animation-duration: 0.2s;
    backface-visibility: hidden;
}

.closeBtn {
    position: absolute;
    height: 38px;
    width: 38px;
    /* background:$content-item-bg;*/
    /*border-left:1px solid rgba(#000, .1);*/
    z-index: 11;
    right: 0;
    top: 0;
    cursor: pointer;

    &:hover {
        background: $content-danger;
        color: $content-bg;
    }
}

.tooles {
    position: absolute;
    height: 38px;
    width: 38px;
    z-index: 11;
    right: 60px;
    top: 0;
}
</style>
<template>
    <div class="ui flex column popCont drawerComp" ref="drawerComp" v-if="commonShow && comp_cont" :style="custom">
        <input type="text" id="hiddenInput" style="position:absolute; opacity:0; top: -100px;visibility: hidden;">
        <div style="height: 48.5px;" v-if="size !== 'no-top' && size !== 'full' && typeof size !== 'object'"></div>
        <div class="item one ui flex animated compCont" :class="inout">
            <div :style="sideWidth" v-if="size !== 'full'"></div>
            <div v-if="drawerTooles" v-html="drawerTooles" @click="toolesClick($event)"
                class="tooles ui flex row-center col-center"></div>
            <div v-if="closeBtn" @click="close" class="closeBtn ui flex row-center col-center">
                <i class="el-icon-close"></i>
            </div>
            <component v-if="comp_cont" ref="compInstance" v-bind:is="comp_cont"></component>
        </div>
    </div>
</template>
<script>
export default {
    name: "drawerComp",
    provide() {
        return {
            isSplit: true,
        };
    },
    props: {
        params: {
            type: Object,
        },
        comp: {
            type: [Function, Object],
        },
        callback: {
            type: Function,
        },
        size: {
            type: [String, Object],
            default: "embed", // full, embed-top
        },
        closeBtn: {
            type: Boolean,
            default: true, // full, embed-top
        },
        mask: {
            type: Boolean,
            default: true, // full, embed-top
        },
        animate: {
            type: Object,
            default() {
                return {
                    in: "slideInRight",
                    out: "slideOutRight",
                };
            },
        },
        hideTooles: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            comp_cont: this.comp,
            commonShow: true,
            inout: this.animate.in,
            innerSize: null,
            timer: null,
            hash: null,
        };
    },
    computed: {
        // 根据sidebar设置弹框大小
        sideWidth() {
            let w = $(".ui-sidebar").width();
            if (this.size === "no-side" || typeof this.size === "object") {
                w = "0";
            }
            return { width: w + "px" };
        },
        custom() {
            const zIndex = { zIndex: 10 }
            if (typeof this.size === "object") {
                return Object.assign({}, this.size, zIndex);
            }
            return zIndex;
        },
        drawerTooles() {
            return this.$drawerTooles && !this.hideTooles ? this.$drawerTooles : false
        },
    },
    mounted() {
        this.$nextTick(() => {
            document.querySelector("#hiddenInput").focus();
            this.hash = window.location.hash;
            this.stopGoback();
        });

        // 打开高斯蒙层
        let svgMask =
            `<div id="svg-blur" style="z-index: 10;width: 100%;height: 100%;position: absolute;top: 0;left: 0; background-color:
        rgba(0,0,0,.5);"></div>`;
        if (this.mask && $("#svg-blur").length < 1) {
            $("body").append(svgMask);
        } else {
            this.indexChange(true)
        }

        // 监听关闭事件 关闭所有抽屉
        this.$once("global:closeDrawer", () => {
            this.close();
        });

        // 点击ui-main组件返回按钮 关闭抽屉
        setTimeout(() => {
            $(this.$el)
                .find(".goback")
                .append(
                    `<span class="goBackDrawer" style="position: absolute; width:100%; height: 100%;display:inline-block; top: 0;left:0;"></span>`
                );
            $(this.$el)
                .find(".goBackDrawer")
                .on("click", (e) => {
                    e.stopPropagation();
                    this.close();
                });
        }, 500);
    },
    methods: {
        async close(obj) {
            const closeParams = this.$refs.compInstance.drawerBeforeClose && await this.$refs.compInstance.drawerBeforeClose()

            if (closeParams === false || closeParams?.isClose === false) return
            this.inout = this.animate.out;
            setTimeout(() => {
                // 触发删除事件 销毁dom
                this.$emit("drawer_closed");
                if (obj && obj.target) {
                    obj = null;
                }
                return this.callback && this.callback(obj || closeParams?.data);
            }, 200);
        },
        toolesClick(e) {
            this.$tooles(e, this);
        },
        stopGoback() {
            // 阻拦回退事件
            history.pushState(null, null, document.URL);
            this.listener = window.addEventListener("popstate", function () {
                history.pushState(null, null, document.URL);
            });
        },
        async indexChange(isAdd) {
            const drawerComp = $(".drawerComp")
            const drawerCompLast = drawerComp[drawerComp.length - 1]
            // 打开新弹窗需要等待，否则后去不到刚添加的弹窗元素
            if (isAdd) {
                console.log(23)
                await this.$nextTick()
            }
            // 获取最后一个元素的index isAdd增加+1，关闭+-1也就是-1
            const index = parseInt(drawerCompLast.style.zIndex) + (isAdd ? 1 : -1)
            // 新增的时候取ref当前元素 ， 删除时取所有弹框的最后一个，
            // 解决由于当前元素不存，在关闭后马上打开在关闭在导致蒙层设置错误
            const el = isAdd ? this.$refs.drawerComp : drawerCompLast
            el.style.zIndex = index
            $("#svg-blur")[0].style.zIndex = index
        }
    },
    beforeDestroy() {
        // 删除高斯蒙层
        if ($(".drawerComp").length < 2) {
            if (document.getElementById("app")) {
                document.getElementById("app").removeAttribute("style");
            }
            $("#svg-blur").remove();
        } else {
            this.indexChange()
        }

        window.removeEventListener("popstate", this.listener);
    },
};
</script>
